<template>
  <div class="two">
    <div class="main">
      <p>分类</p>
      <ul>
        <li :class="ind==-1? 'active' : '' "  @click="ind=-1">全部</li>
        <li
          v-for="(item, index) in fllist"
          :key="item.category_id"
          @click="btn(index)"
          :class="index==ind? 'active' : '' "
        >
          {{ item.category_name }}
        </li>
      </ul>
    </div>

      <ul class="cart">
            <li v-for=" item in $store.state.list" :key="item.product_id">
                <img :src="item.product_picture" alt="">
                <p>{{item.product_name}}</p>
                <p> <span style="color:rgb(168, 159, 159);">{{item.product_title}}</span></p>
                <p><span style="color:red;">{{item.product_price}}</span></p>
            </li>
        </ul>


  </div>
</template>

<script>
export default {
  data() {
    return {
      fllist: "",
      ind: -1,
    };
  },
  created() {
    this.$axios({ url: "/product/getCategory", method: "post" }).then((res) => {
      // console.log(res);
      this.fllist = res.data.category;
    });
    this.$axios({url:"/product/getAllProduct", method:"post"}).then((res)=>{
      // console.log(res);
      this.$store.commit('add',res.data.Product)
    })
  },
  methods: {
    btn(i) {
      this.ind = i;
    },
  },
};
</script>

<style lang="scss" scoped>
.main {
  margin-top: 20px;
  width: 100%;
  display: flex;
  p {
    width: 80px;
    line-height: 30px;
    font-size: 20px;
    text-align: center;
  }
  ul {
  display: flex;
  li {
    width: 80px;
    line-height: 35px;
    text-align: center;
    border: 1px solid rgb(168, 159, 159);
  }
}
}

.active{
  color: skyblue;
}

.cart{
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    background: rgb(231, 230, 230);
    // justify-content: space-around;

    li{
        margin: 20px 10px;
        background: #fff;
        flex-basis: 18%;
        box-shadow: 5px 5px 5px 5px rgb(187, 185, 185);
        img{
            width: 229px;
            height: 229px;
        }
        p{
          margin: 10px 0;
        }
    }
}
</style>